<template>
    <div class="login-container login-container--new">
      <div class="login">
          <div class="logo" style="width: 100vw">
              <i18n class="i18n" v-if="!loading"
                    @changeLang="changeLang"
                      >
              </i18n>
          </div>
          <div class="login-box">
            <!-- 登陆组件-->
            <login :isOem="isOem" ref="login"></login>
          </div>
          <!-- 浏览器推荐 -->
          <browser></browser>
          <!--<active-page></active-page>-->
           <!--<v-editor></v-editor>-->
      </div>
    </div>
</template>

<script>
import I18n from './I18nSelect'
import eleLocaleZhCN from 'element-ui/lib/locale/lang/zh-CN'
import eleLocaleZhTW from 'element-ui/lib/locale/lang/zh-TW'
import eleLocaleEn from 'element-ui/lib/locale/lang/en'
import Browser from './Browser'
import Vue from 'vue'
import Login from './login.vue'
import Bottom from './Footer'
export default {
  name: 'login-kf',
  components: {
    Login,
    I18n,
    Browser,
    Bottom
  },
  data () {
    return {
      isOem: true,
      loading: true,
      count: 0
    }
  },
  computed: {
  },
  methods: {
    changeLang (lang) {
      this.$refs.login.changeLang(lang)
      this.fetchData(lang)
    },
    fetchData (lang, count = 0) {
      let langTemp = ''
      if (!lang) {
        this.loading = false
        return null
      } else {
        langTemp = lang
      }
      let url = window.location.origin + '/static/i18n/locales/' + langTemp + '.json'
      let urlConfig = window.location.origin + '/static/i18n/locales/' + langTemp + '_Config.json'
      Promise.all([
          window.fetch(url + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        }),
        window.fetch(urlConfig + '?_=' + Math.random(), {
          method: 'get',
          headers: {
            'Content-Type': 'application/json'
          }
        })
      ]).then(([response1, response2]) => {
        Promise.all([response1.json(), response2.json()])
        .then(([res1, res2]) => {
            let locales = ''
            switch (langTemp) {
              case 'zh_CN':
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'zh_TW':
                locales = {...res1, ...res2, ...eleLocaleZhTW}
                this.$store.commit('SET_LABEL_POSITION', 'left')
                break
              case 'en':
                locales = {...res1, ...res2, ...eleLocaleEn}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
              default:
                locales = {...res1, ...res2, ...eleLocaleZhCN}
                this.$store.commit('SET_LABEL_POSITION', 'top')
                break
            }
            document.title = `${locales.routeI18n.login} - ${locales.login.cloudService}`
            this.$router.afterEach((route) => {
              let title = route.meta.title || ''
              document.title = `${locales.routeI18n[title]} - ${locales.login.cloudService}`
            })
            Vue.set(Vue.config, 'lang', langTemp || 'zh_CN')
            this.$i18n.setLocaleMessage(lang || 'zh_CN', locales)
            this.$i18n.locale = lang
            window.langJson = {...res1, ...res2} || {}
            this.loading = false
          }).catch(() => {
          if (this.count < 3) {
            this.fetchData(lang, this.count++)
          } else {
            window.alert('Network anomaly！！！ Please check your network')
          }
        })
      })
    },
  },
  beforeMount () {
    this.fetchData()
  }
}
</script>
<style lang="stylus" scoped>
  @import "../../../assets/common.styl"
  .login-news
    padding-left 20px
  .login-container
    height 100vh
    -webkit-user-select none
    background #f9fafb
  h1
  h2
    font-weight normal
  a
    color  $c-main
  .login
    font-size 12px
    width 100%
    height 100%
    display flex
    justify-content center
    align-items center
    flex-direction column
    .notify
      position: absolute;
      top: 65px;
      color: #1a1a1a;
      text-align: center;
      background-color: #b2daff;
      width: 100%;
      min-width 1200px
      z-index 104
      .notify-a
        margin-left: 10px;
        color #fff
        background-color #459ae9
        border-radius: 4px;
        padding: 2px 7px;
      .content
        font-size 14px
        padding: 10px;
        margin-right: 50px;
      .close
        position: absolute;
        top: 8px;
        right: 30px;
        font-size: 14px;
        color #fff
    .logo
      min-width: 1200px;
      height: 60px;
      position: absolute;
      top: 0px;
      background-color: #feffff;
      z-index 1000
      box-shadow: 0px 1px 2px #ccc;
      .left
        position absolute
        left 120px
        .icon
          max-width 100%
          max-height 100%
        .title
          font-size: 16px;
          color: #666;
          margin-left: 40px;
          margin-top: 20px;
        .logo-7moor
          width: auto;
          height: 40px;
          margin-top: 10px;
          float left
      .center
        position: absolute;
        right: 250px;
        top: 22px;
        color #666
  .login-box
    position: relative;
    padding-top: 100px;
  .vertical-line
      position absolute
      display inline-block
      height 290px
      width 1px
      top 0px
      left 463px
      background-color #99d0e3

  .login-tip-size
      height 14px
      .active
          display block

  .ml
    margin-left: 80px
  .i18n
    position absolute
    top 12px
    right 20px
    width 110px
</style>
